import React, { useState } from 'react';
import { Droppable, Draggable } from 'react-beautiful-dnd';
import classNames from 'classnames';
import { QuadrantProps } from '../types';
import TaskItem from './TaskItem';

const Quadrant: React.FC<QuadrantProps> = ({
  id,
  title,
  description,
  color,
  tasks,
  onToggleStatus,
  onAddTask
}) => {
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const [isAdding, setIsAdding] = useState(false);

  const handleAddTask = () => {
    if (newTaskTitle.trim()) {
      onAddTask(newTaskTitle);
      setNewTaskTitle('');
      setIsAdding(false);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleAddTask();
    } else if (e.key === 'Escape') {
      setIsAdding(false);
      setNewTaskTitle('');
    }
  };

  return (
    <div 
      className={`flex flex-col bg-white rounded-lg shadow p-4 border-t-4 border-${color} overflow-hidden`}
    >
      <div className="flex justify-between items-center mb-2">
        <div>
          <h2 className="text-lg font-bold text-gray-900">{title}</h2>
          <p className="text-sm text-gray-600">{description}</p>
        </div>
        <div className="flex items-center">
          <span className="text-sm font-medium bg-gray-100 px-2 py-1 rounded-md">
            {tasks.length} 任务
          </span>
          <button
            className="ml-2 p-1 rounded-full text-gray-500 hover:bg-gray-100"
            onClick={() => setIsAdding(true)}
            aria-label="添加任务"
          >
            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
          </button>
        </div>
      </div>

      {isAdding && (
        <div className="mb-3 p-2 bg-gray-50 rounded-md">
          <input
            type="text"
            value={newTaskTitle}
            onChange={(e) => setNewTaskTitle(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="输入任务名称..."
            className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            autoFocus
          />
          <div className="flex justify-end mt-2 space-x-2">
            <button
              onClick={() => setIsAdding(false)}
              className="px-3 py-1 text-sm text-gray-600 hover:text-gray-900"
            >
              取消
            </button>
            <button
              onClick={handleAddTask}
              className="px-3 py-1 text-sm bg-blue-500 text-white rounded-md hover:bg-blue-600"
            >
              添加
            </button>
          </div>
        </div>
      )}

      <Droppable droppableId={String(id)}>
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            className={classNames(
              'flex-1 overflow-y-auto',
              { 'bg-blue-50': snapshot.isDraggingOver }
            )}
            style={{ minHeight: '100px' }}
          >
            {tasks.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-24 text-gray-400 text-sm">
                <svg className="h-6 w-6 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                <p>暂无任务</p>
              </div>
            ) : (
              <div className="space-y-2">
                {tasks.map((task, index) => (
                  <Draggable key={task.id} draggableId={task.id} index={index}>
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        className={classNames(
                          'task-card',
                          { 'shadow-md': snapshot.isDragging }
                        )}
                      >
                        <TaskItem
                          task={task}
                          onToggleStatus={onToggleStatus}
                          color={color}
                        />
                      </div>
                    )}
                  </Draggable>
                ))}
              </div>
            )}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  );
};

export default Quadrant; 